import {Button, DatePicker, Input, NavBar} from 'antd-mobile'
import Icon from '@/components/Icon'
import './index.scss'
import classNames from 'classnames'
import {billListData} from '@/contants'
import {useNavigate} from 'react-router-dom'
import {useState} from "react";
import {useDispatch} from "react-redux";
import {addBillList} from "@/store/modules/billStore";
import dayjs from "dayjs";

const New = () => {
    // 支出 收入按钮状态，pay 支出，income 收入
    const [billType, SetBillType] = useState('pay');
    const navigate = useNavigate()

    // 金额
    const [money, setMoney] = useState(0);
    const moneyChange = (value) => {
        setMoney(value)
    }

    // 账单类型
    const [useFor, setUseFor] = useState('');
    const dispatch = useDispatch();
    // 收集账单
    const saveBill = () => {
        const data = {
            type: billType,
            money: billType === 'pay' ? -money : +money,
            date: date,
            useFor: useFor,
        }
        console.log(data)
        dispatch(addBillList(data))
    }

    // 记账时间
    const [date, setDate] = useState(new Date());

    // 控制时间选择器状态
    const [dateVisible, setDateVisible] = useState(false);
    // 时间选择器的确定方法
    const onConfirm = (value) => {
        // 关闭弹框
        setDateVisible(false)
        // 记录时间
        setDate(value)
    }

    // 显示时间
    const showDate = () => {
        const chooseDate = dayjs(date).format('YYYY-MM-DD');
        if (chooseDate === dayjs().format('YYYY-MM-DD')) {
            return '今天'
        }
        return chooseDate
    }

    return (
        <div className="keepAccounts">
            <NavBar className="nav" onBack={() => navigate(-1)}>
                记一笔
            </NavBar>

            <div className="header">
                <div className="kaType">
                    <Button
                        shape="rounded"
                        className={classNames(billType === 'pay' ? 'selected' : '')}
                        onClick={() => SetBillType('pay')}
                    >
                        支出
                    </Button>
                    <Button
                        className={classNames(billType === 'income' ? 'selected' : '')}
                        shape="rounded"
                        onClick={() => SetBillType('income')}
                    >
                        收入
                    </Button>
                </div>

                <div className="kaFormWrapper">
                    <div className="kaForm">
                        <div className="date">
                            <Icon type="calendar" className="icon"/>
                            <span className="text"
                                  onClick={() => setDateVisible(true)}>{showDate()}</span>
                            {/* 时间选择器 */}
                            <DatePicker
                                className="kaDate"
                                title="记账日期"
                                max={new Date()}
                                visible={dateVisible}
                                // 点击蒙层按钮
                                onClose={() => {
                                    setDateVisible(false)
                                }}
                                // 确定
                                onConfirm={onConfirm}
                                // 取消
                                onCancel={() => {
                                    setDateVisible(false)
                                }}
                            />
                        </div>
                        <div className="kaInput">
                            <Input
                                className="input"
                                placeholder="0.00"
                                type="number"
                                onChange={moneyChange}
                            />
                            <span className="iconYuan">¥</span>
                        </div>
                    </div>
                </div>
            </div>

            <div className="kaTypeList">
                {billListData[billType].map(item => {
                    return (
                        <div className="kaType" key={item.type}>
                            <div className="title">{item.name}</div>
                            <div className="list">
                                {item.list.map(item => {
                                    return (
                                        <div
                                            className={classNames(
                                                'item',
                                                useFor === item.type ? 'selected' : ''
                                            )}
                                            key={item.type}
                                            onClick={() => setUseFor(item.type)}
                                        >
                                            <div className="icon">
                                                {<Icon type={item.type}/>}
                                            </div>
                                            <div className="text">{item.name}</div>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                    )
                })}
            </div>

            <div className="btns">
                <Button className="btn save" onClick={saveBill}>
                    保 存
                </Button>
            </div>
        </div>
    )
}

export default New